<template>
  <div class="modal">
    <div class="fast-pwd">
      <div class="title">
        锁屏密码
      </div>
      <div class="top-hint">
        <div class="text" v-show="!isNewPwd">请输入旧密码</div>
        <div class="text" v-show="isNewPwd">请输入新密码</div>
        <div class="dots">
          <span 
            class="dot" 
            :class="index < inputNumbers.length ? 'fill' : ''"
            v-for="(item, index) in pwdLen" 
            :key="index" 
            >
          </span>
        </div>
      </div>
      <div class="numbers">
        <div v-for="(row, index) in numbers" :key="index" class="row">
          <span 
            class="number" 
            :class="activeNumber == number ? 'active' : ''"
            v-for="(number) in row" 
            :key="number"
            @touchstart="handleTouchStart(number)"
            @touchend="handleTouchEnd"
            >
            {{number}}
          </span>
        </div>
        <div class="row row-other">
          <div class="number" style="opacity: 0"></div>
          <span 
            class="number"
            :class="activeNumber == 0 ? 'active' : ''"
            @touchstart="handleTouchStart(0)"
            @touchend="handleTouchEnd"
            >0
          </span>
          <div class="number" style="border: none; background: none">
            <back-space 
              style="margin-left: 10px"
              @click.native="handleDelete"
            ></back-space>
          </div>
        </div>
      </div>
      <div class="bottom-hint">
        <span class="cancel" @click="handleCancel">
          取消
        </span>
        <span class="find-pwd" @click="handleFindPwd" v-show="!isNewPwd">
          找回密码
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import BackSpace from '@/components/base/back-space/back-space'
export default {
  components: {
    BackSpace
  },
  data() {
    return {
      pwdLen: new Array(6),
      numbers: [[1,2,3],[4,5,6],[7,8,9]],
      activeNumber: -1,
      inputNumbers: [],
      isNewPwd: false
    }
  },
  methods: {
    handleTouchStart(number) {
      this.activeNumber = number
      if (this.inputNumbers.length < 6) {
        this.inputNumbers.push(number)
        if (this.inputNumbers.length == 6) {
          let pwd = ''
          this.inputNumbers.forEach(number => {
            pwd += number.toString() 
          })
          if (!this.isNewPwd) {
            setTimeout(() => {
              this.isNewPwd = true 
              this.inputNumbers = []
            }, 1000);
          } else {
            // 发送pwd到后台
          }
        }
      } 
    },
    handleTouchEnd() {
      this.activeNumber = -1
    },
    handleDelete() {
      this.inputNumbers.pop()
      console.log(this.inputNumbers)
    },
    handleCancel() {
      this.inputNumbers = []
      this.$emit('click')
    },
    handleFindPwd() {

    }
  }
}
</script>

<style lang="stylus" scoped>
  .modal 
    position fixed 
    top 0
    left 0
    right 0
    bottom 0
    background rgba(0,0,0, 0.8)
    .fast-pwd 
      color #fff
      .title 
        height 48px 
        line-height 48px 
        text-align center 
        font-size 15px
        font-weight 700
      .top-hint 
        margin-top 40px
        text-align center
        .text 
          font-size 15px
          font-weight 700
        .dots   
          display flex 
          justify-content center
          margin-top 25px
          .dot 
            width 12px 
            height 12px 
            margin-right 15px 
            border-radius 6px
            border 1px solid #929292
            box-sizing border-box 
            &.fill 
              background #fff
            &:last-child 
              margin-right 0
      .numbers 
        display flex 
        flex-wrap wrap
        box-sizing border-box 
        padding 0 20px
        margin-top 70px 
        .row 
          display flex
          width 100%  
          justify-content space-around
          margin 10px 0
          align-items center
          .number 
            width 59px 
            height 59px 
            border-radius 50% 
            box-sizing border-box
            border 1px solid #929292
            display flex 
            align-items center 
            justify-content center
            font-size 16px
            background rgba(0,0,0,0.6)
            &.active 
              background rgba(#666, 0.6)
      .bottom-hint 
        position absolute 
        left 0 
        right 0
        bottom 0
        height 50px
        line-height 50px
        text-align right
        box-sizing border-box 
        padding-right 20px
        .cancel 
          position absolute 
          top 50%
          left 50% 
          transform translate(-50%, -50%)
</style>